<template>
    <div
        class="progress-card-container"
        :style="cardCss">
        <h3
            class="card-title"
            :style="{
                'fontSize': data.options.titleFontSize
            }"
        >{{ data.options.titleDefaultValueCName }}</h3>
        <p class="desc">{{ data.options.titleDescDefaultValueCName }}</p>
        <div class="info-content">
            <img :src="data.options.avatarDefaultValue" v-if="data.options.isShowAvatar" class="avatar">
            <div class="right">
                <h3 class="name">{{ data.options.nameDefaultValueCName }}</h3>
                <div class="desc">{{ data.options.descDefaultValueCName }}</div>
            </div>
        </div>
        <div class="progress-wrap">
            <div class="title">{{ data.options.progressTitleDefaultValueCName }} {{ data.options.progressNumCName }}%</div>
            <div class="progress">
                <el-progress :percentage="data.options.progressNumCName" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ProgressCard',
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        cardCss() {
            return {
                'background': 'linear-gradient(to ' + this.data.options.direction + ', ' + this.data.options.color1 + ', ' + this.data.options.color2 + ')',
                'color': this.data.options.color,
                'fontSize': this.data.options.fontSize
            }
        }
    }
}
</script>
